<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文件传输任务配置</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
    <link href="./bootstrap/css/datetimepicker.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/global.css" />
    <link rel="stylesheet" href="./css/file-task.css" />
    <link rel="stylesheet" href="./css/task-config.css" />
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./bootstrap/js/moment.js"></script>
    <script src="./bootstrap/js/datetimepicker.js"></script>
    <script src="./js/global.js"></script>
  </head>

  <body>
    <div class="container col-lg-12">
      <div class="navigation">
        <img class="nav-logo float-left" src="./img/logo.png" alt="logo" />
        <div class="nav-text float-left">标准版</div>
        <div class="nav-drop dropdown float-right">
          <a
            href="#"
            class="dropdown-toggle"
            data-toggle="dropdown"
            role="button"
            aria-haspopup="true"
            aria-expanded="false"
            >ADMIN <span class="caret"></span
          ></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <span class="dropdown-menu-top"></span>
            <li><a href="#">个人信息</a></li>
            <li><a href="#">修改密码</a></li>
          </ul>
        </div>
        <img class="nav-avatar float-right" src="./img/avatar.png" alt="头像" />
      </div>
      <div id="sidebar" class="sidebar">
        <ul>
          <li><a href="home.html"> 首页</a></li>
          <li><a href="file-task.html"> 文件传输任务</a></li>
          <li><a href="execute-list.html"> 执行列表</a></li>
          <li class="active">
            <a href="task-config.html"> 文件传输任务配置</a>
          </li>
          <li><a href="ferry-task.html"> 光盘摆渡任务</a></li>
          <li><a href="log-list.html"> 日志管理</a></li>
          <li><a href="user.html"> 个人中心</a></li>
        </ul>
        <ul class="m-hide icon-sidebar">
          <li>
            <a
              href="home.html"
              data-toggle="tooltipp"
              data-placement="right"
              title="首页"
            >
            </a>
          </li>
          <li>
            <a
              href="file-task.html"
              data-toggle="tooltipp"
              data-placement="right"
              title="文件传输任务"
            >
            </a>
          </li>
          <li>
            <a
              href="execute-list.html"
              data-toggle="tooltipp"
              data-placement="right"
              title="执行列表"
            >
            </a>
          </li>
          <li class="active">
            <a
              href="task-config.html"
              data-toggle="tooltipp"
              data-placement="right"
              title="文件传输任务配置"
            >
            </a>
          </li>
          <li>
            <a
              href="ferry-task.html"
              data-toggle="tooltipp"
              data-placement="right"
              title="光盘摆渡任务"
            >
            </a>
          </li>
          <li>
            <a
              href="log-list.html"
              data-toggle="tooltipp"
              data-placement="right"
              title="日志管理"
            >
            </a>
          </li>
          <li>
            <a
              href="user.html"
              data-toggle="tooltipp"
              data-placement="right"
              title="个人中心"
            >
            </a>
          </li>
        </ul>
        <div id="flod-btn" class="flod-btn"></div>
      </div>
      <div id="m-content" class="content">
        <p>文件传输任务配置</p>

        <div class="card-2 float-right panel">
          <div class="title">
            <ul class="clearfloat" style="display: inline-block">
              <li
                class="btn btn-xs float-left m-btn"
                data-toggle="modal"
                data-target="#auditModal"
              >
                提交审核
              </li>
              <li
                class="btn btn-xs float-left m-btn"
                data-toggle="modal"
                data-target="#updateModal"
              >
                修改
              </li>
              <li
                class="btn btn-default btn-xs float-left m-btn m-text-success"
                data-toggle="modal"
                data-target="#startModal"
              >
                启动
              </li>
              <li
                class="btn btn-default btn-xs float-left m-btn"
                data-toggle="modal"
                data-target="#stopModal"
              >
                停止
              </li>
              <li
                class="btn btn-default btn-xs float-left m-btn"
                data-toggle="modal"
                data-target="#auditModalSure"
              >
                审核
              </li>
            </ul>
          </div>
          <div class="modal-body">
            <form class="modal-form">
              <ul class="ul_ul">
                <li class="left_li">任务名称：</li>
                <li class="right_li margin-l">
                  <input
                    disabled
                    class="input-padding"
                    type="text"
                    placeholder="asf5636"
                  />
                </li>
              </ul>
              <ul class="ul_ul">
                <li class="left_li">任务编号：</li>
                <li class="right_li margin-l">
                  <input
                    class="input-padding"
                    disabled
                    type="text"
                    placeholder="sdjg25ds1g5sfdgsv15d"
                  />
                </li>
              </ul>
              <ul class="ul_ul">
                <li class="left_li">文件传输：</li>
                <li class="right_li margin-l">
                  <div class="form-group right_li" style="width: 301px">
                    <select disabled class="form-control">
                      <option>请选择...</option>
                      <option>SFTP</option>
                      <option>FTP</option>
                    </select>
                  </div>
                </li>
              </ul>

              <ul class="ul_ul">
                <li class="left_li">源配置：</li>
                <li class="right_li margin-l">
                  <div class="form-group right_li" style="width: 301px">
                    <select disabled class="form-control">
                      <option>请选择...</option>
                      <option>1</option>
                      <option>2</option>
                    </select>
                  </div>
                </li>
              </ul>
              <ul class="ul_ul">
                <li class="left_li">文件操作：</li>
                <li class="right_li margin-l">
                  <div class="form-group right_li">
                    <div disabled class="choose-file" data-toggle="modal">
                      选择文件
                      <!-- data-target="#myFileModal" -->
                    </div>
                  </div>
                </li>
              </ul>

              <ul class="ul_ul">
                <li class="left_li">目标配置：</li>
                <li class="right_li margin-l">
                  <div class="form-group right_li" style="width: 301px">
                    <select disabled class="form-control">
                      <option>请选择...</option>
                      <option>1</option>
                      <option>2</option>
                    </select>
                  </div>
                </li>
              </ul>
              <ul class="ul_ul">
                <li class="left_li">发件人：</li>
                <li class="right_li margin-l">
                  <input
                    disabled
                    type="text"
                    class="input-padding"
                    disabled
                    placeholder="操作员a"
                  />
                </li>
              </ul>
              <ul class="ul_ul">
                <li class="left_li">收件人：</li>
                <li class="right_li margin-l">
                  <input
                    disabled
                    type="text"
                    class="input-padding"
                    disabled
                    placeholder="操作员a"
                  />
                </li>
              </ul>
              <ul class="ul_ul">
                <li class="left_li">审核人：</li>
                <li class="right_li margin-l">
                  <div class="form-group right_li" style="width: 301px">
                    <select disabled class="form-control">
                      <option>杨发财</option>
                      <option>杨挣钱</option>
                    </select>
                  </div>
                </li>
              </ul>
              <ul class="ul_ul">
                <li class="left_li">摆渡策略：</li>
                <li class="right_li margin-l">
                  <div class="form-group right_li" style="width: 301px">
                    <select disabled id="strategy" class="form-control">
                      <option value="1">立即摆渡</option>
                      <option value="2">定时摆渡</option>
                      <option value="3">周期摆渡</option>
                    </select>
                  </div>
                </li>
              </ul>
              <ul class="ul_ul">
                <li class="left_li">摆渡模式：</li>
                <li class="right_li margin-l">
                  <span
                    ><input
                      class="cl_checked input-padding"
                      type="checkbox"
                      checked="checked"
                      value="a"
                    />
                    独享模式</span
                  >
                  <span
                    ><input
                      class="cl_checked input-padding"
                      type="checkbox"
                      value="b"
                    />
                    共享模式</span
                  >
                </li>
              </ul>

              <ul class="ul_ul fixedTime">
                <li class="left_li">执行时间：</li>
                <li class="right_li margin-l">
                  <input
                    disabled
                    id="datetimepicker1"
                    class="form_datetime form-control input-padding icon-time"
                    type="text"
                    value=""
                    id="startConsignedTm"
                    name="startConsignedTm"
                    placeholder="选择日期"
                  />
                </li>
              </ul>
              <ul class="ul_ul period">
                <li class="left_li">开始日期：</li>
                <li class="right_li margin-l">
                  <input
                    disabled
                    id="datetimepicker1"
                    class="form_datetime form-control input-padding icon-time"
                    type="text"
                    value=""
                    id="startConsignedTm"
                    name="startConsignedTm"
                    placeholder="选择日期"
                  />
                </li>
              </ul>
              <ul class="ul_ul period">
                <li class="left_li">结束日期：</li>
                <li class="right_li margin-l">
                  <input
                    disabled
                    id="datetimepicker2"
                    class="form_datetime form-control input-padding icon-time"
                    type="text"
                    value=""
                    id="endConsignedTm"
                    name="endConsignedTm"
                    placeholder="选择日期"
                  />
                </li>
              </ul>
              <ul class="ul_ul period">
                <li class="left_li">时间区间：</li>
                <li class="right_li margin-l">
                  <div class="select-group">
                    <select disabled class="form-control">
                      <option>0:00</option>
                      <option>0:30</option>
                    </select>
                    <span style="margin: 0 12px"> —— </span>
                    <select disabled class="form-control">
                      <option>0:00</option>
                      <option>0:30</option>
                    </select>
                  </div>
                </li>
              </ul>
              <ul class="ul_ul period">
                <li class="left_li">时间间隔：</li>
                <li class="right_li margin-l">
                  <div class="select-group">
                    <select disabled class="form-control">
                      <option>30</option>
                      <option>60</option>
                    </select>
                    <span style="margin: 0 12px"> —— </span>
                    <select disabled class="form-control">
                      <option>分钟</option>
                      <option>小时</option>
                    </select>
                  </div>
                </li>
              </ul>
              <ul class="ul_bei">
                <li class="left_li">备注：</li>
                <li class="right_bei margin-l">
                  <textarea
                    disabled
                    class="input-padding"
                    type="text"
                    placeholder="请输入"
                  ></textarea>
                </li>
              </ul>
            </form>
            <div id="choosed_file">
              <div class="choosed-file">已选文件：</div>
              <div class="modal-table" style="overflow: auto; height: 400px">
                <table
                  class="table text-center"
                  style="text-overflow: ellipsis; white-space: nowrap"
                >
                  <thead>
                    <tr>
                      <td>名称</td>
                      <td>路径</td>
                      <td>大小</td>
                      <td>黑名单</td>
                      <td>修改日期</td>
                      <td></td>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>是</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>是</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>是</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>是</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>否</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>否</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>否</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>否</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>否</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>否</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                    <tr>
                      <td>名称1</td>
                      <td>
                        <span
                          data-toggle="tooltip"
                          data-placement="right"
                          title="asf563f5636asf5636"
                          >asf5636</span
                        >
                      </td>
                      <td>3MB</td>
                      <td>否</td>
                      <td>2020.01.01</td>
                      <td>
                        <img
                          class="table-close"
                          src="img/view-close.png"
                          alt=""
                        />
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="form-footer">
            <div class="save">保存</div>
          </div>
        </div>
      </div>

      <!-- 删除提示 -->
      <div class="modal fade" tabindex="-1" id="removeModal" role="dialog">
        <div class="modal-dialog modal-center" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span class="modal-close" aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
              <div class="tip-content">
                <img src="img/tip.png" alt="" />
                <span>确定要删除该文件传输任务吗？</span>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn_b">确定</button>
              <button type="button" class="btn_q" data-dismiss="modal">
                取消
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 提交审核提示 -->
      <div class="modal fade" tabindex="-1" id="auditModal" role="dialog">
        <div class="modal-dialog modal-center" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span class="modal-close" aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
              <div class="tip-content">
                <img src="img/tip.png" alt="" /> <span>确定要提交审核吗？</span>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn_b" data-dismiss="modal">
                确定
              </button>
              <button type="button" class="btn_q" data-dismiss="modal">
                取消
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 修改提示 -->
      <div class="modal fade" tabindex="-1" id="updateModal" role="dialog">
        <div class="modal-dialog modal-center" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span class="modal-close" aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
              <div class="tip-content">
                <span>文件传输任务状态符合修改条件，可以进行配置修改</span>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn_b" data-dismiss="modal">
                确定
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 启动成功提示 -->
      <div class="modal fade" tabindex="-1" id="startModal" role="dialog">
        <div class="modal-dialog modal-center" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span class="modal-close" aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
              <div class="tip-content">
                <img src="img/start_success.png" alt="" />
                <span>任务启动成功</span>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn_b" data-dismiss="modal">
                确定
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 停止提示 -->
      <div class="modal fade" tabindex="-1" id="stopModal" role="dialog">
        <div class="modal-dialog modal-center" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span class="modal-close" aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
              <div class="tip-content">
                <span>任务已停止</span>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn_b" data-dismiss="modal">
                确定
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 审核 -->
      <div class="modal fade" tabindex="-1" id="auditModalSure" role="dialog">
        <div class="modal-dialog modal-center" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span class="modal-close" aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">审核</h4>
            </div>
            <div class="modal-body">
              <form class="modal-form">
                <ul class="ul_bei">
                  <li class="left_li">文件传输：</li>
                  <li class="right_bei margin-l">
                    <textarea
                      class="input-padding"
                      type="text"
                      placeholder="请输入审核意见"
                    ></textarea>
                  </li>
                </ul>
                <ul class="ul_ul">
                  <li class="left_li">审核结果：</li>
                  <li class="right_li margin-l" style="display: flex">
                    <span style="display: flex; align-items: center"
                      ><input
                        style="width: 20px !important; height: 20px !important"
                        class="cl_checked input-padding"
                        type="checkbox"
                        checked="checked"
                        value="a"
                      />
                      通过</span
                    >
                    <span style="display: flex; align-items: center"
                      ><input
                        style="width: 20px !important; height: 20px !important"
                        class="cl_checked input-padding"
                        type="checkbox"
                        value="b"
                      />
                      不通过</span
                    >
                  </li>
                </ul>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn_b">确定</button>
              <button type="button" class="btn_q" data-dismiss="modal">
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(function () {
        // 列表点击选中的效果
        $('[data-toggle="tooltip"]').tooltip();

        $("#m-tab-top>tbody>tr,#m-tab-bottom>tbody>tr").click(function () {
          var i = $(this).index();
          $($("#m-tab-top>tbody>tr")[i])
            .toggleClass("tr-active")
            .siblings()
            .removeClass("tr-active");
          $($("#m-tab-bottom>tbody>tr")[i])
            .toggleClass("tr-active")
            .siblings()
            .removeClass("tr-active");
        });
        $("#datetimepicker1,#datetimepicker2").datetimepicker({
          format: "YYYY-MM-DD",
          locale: moment.locale("zh-cn"),
          defaultDate: "",
        });
        $("#strategy").change(function (e) {
          var value = e.target.value;
          if (value == 1) {
            $(".period").removeClass("showTime");
            $(".fixedTime").removeClass("showTime");
            $("#choosed_file").show();
            $("#file_action").show();
          }
          if (value == 2) {
            $(".fixedTime").addClass("showTime");
            $(".period").removeClass("showTime");
            $("#choosed_file").show();
            $("#file_action").show();
          }
          if (value == 3) {
            $(".fixedTime").removeClass("showTime");
            $(".period").addClass("showTime");
            $("#choosed_file").hide();
            $("#file_action").hide();
          }
        });
      });
    </script>
  </body>
</html>
